<template>
      <!--切图弹窗-->
      <el-dialog v-model="pd.cutoutShow" width="800px" append-to-body @closed="handleCropperClose">
        <template #header="{ titleId, titleClass }">
          <el-row :gutter="20" align="middle" style="margin-top:10px">
            <el-col :span="4" :offset="0">
              <h4 :id="titleId" :class="titleClass">编辑图片</h4>
            </el-col>
            <el-col :span="4" :offset="0">
              <span>截图框宽度为:</span>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-input v-model="pd.CropWidth" />
            </el-col>
            <el-col :span="4" :offset="0">
              <span>截图框高度为:</span>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-input v-model="pd.CropHeight" />
            </el-col>
          </el-row>
          <el-row :gutter="20" align="middle" style="margin-top:10px" >
            <el-col :span="2" :offset="0">
              <span>分类:</span>
            </el-col>
            <el-col :span="6" :offset="0">
              <tree-select :dictType="'sys_oss_picture'" v-model:dictValue="pd.form.treeValue" placeholder="请选择图片分类"/>
            </el-col>
            <el-col :span="3" :offset="0">
              <span>文件名:</span>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-input v-model="pd.form.name" placeholder="请输入文件名" />
            </el-col>
          </el-row>
        </template>
        <el-row>
          <el-col :xs="24" :md="12" :style="{ height: '350px' }">
            <VueCropper ref="cropper" :img="fileImg" :info="true" :autoCrop="pd.options.autoCrop"
                        :autoCropWidth="pd.CropWidth" :autoCropHeight="pd.CropHeight" :fixedBox="pd.options.fixedBox"
                        :outputType="pd.options.outputType" @realTime="realTime" />
          </el-col>
          <el-col :xs="24" :md="12" :style="{ height: '350px' }">
            <div class="avatar-upload-preview">
              <img :src="pd.options.previews.url" :style="pd.options.previews.img"  alt="编辑预览"/>
            </div>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :offset="2" :span="2">
            <el-button icon="Plus" @click="changeScale(1)"></el-button>
          </el-col>
          <el-col :span="2">
            <el-button icon="Minus" @click="changeScale(-1)"></el-button>
          </el-col>
          <el-col :span="2">
            <el-button icon="RefreshLeft" @click="rotateLeft()"></el-button>
          </el-col>
          <el-col :span="7">
            <el-button icon="RefreshRight" @click="rotateRight()"></el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="addUploadCropper()">上传编辑图片</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="handleBeforeClose()">上传原图</el-button>
          </el-col>
        </el-row>
      </el-dialog>
</template>

<script setup lang="ts" name="imgCut">
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import { getCurrentInstance, reactive } from "vue";
import { upLoad} from "@/views/system/oss/api";
import TreeSelect from "@/views/system/dict/treeSelect.vue";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(["ok"]);
const props = defineProps({
  idList: [String, Number],
  cutoutShow: {
    type: Boolean,
    default: false,
  },
  imgFile: {
    type: Object,
    default: [],
  },
  uploadFile: {
    type: File,
    default: null,
  },
});

const fileImg = computed(
  () => {
    const reader = new FileReader();
    reader.readAsDataURL(<Blob>props.imgFile);
    reader.onload = () => {
      pd.options.img = <string>reader.result;
    };
    return pd.options.img
  }
);
const pd = reactive({
  cutoutShow: false,// 切图弹窗
  filename: '',
  formData: new FormData() as any,
  CropWidth: 200,// vue-cropper默认生成截图框大小
  CropHeight: 200,
  form: {
    url: "",
    type: "",
    name: "",
    treeValue: '',
    fileSize: "",
    remark: "",
    uid: "",
  },
  options: {
    img: '', // 裁剪图片的地址
    autoCrop: true, // 是否默认生成截图框
    fixedBox: true, // 固定截图框大小 不允许改变
    outputType: "png", // 默认生成截图为PNG格式
    previews: {
      url: '',
      img: ''
    } //预览数据
  },
})

watch(()=>props.cutoutShow,(value)=>{
  pd.cutoutShow = value
})

// 向左旋转
function rotateLeft() {
  (proxy?.$refs.cropper as any).rotateLeft();
}

// 向右旋转
function rotateRight() {
  (proxy?.$refs.cropper as any).rotateRight();
}

// 图片缩放
function changeScale(num: any) {
  num = num || 1;
  (proxy?.$refs.cropper as any).changeScale(num);
}

// 实时预览
function realTime(data: any) {
  pd.options.previews = data;
}

// 编辑后上传
function addUploadCropper() {
  (proxy?.$refs.cropper as any).getCropBlob((img: Blob) => {
    pd.formData = new FormData;
    pd.formData.append("file", img);
    fileUpload()
  });
}

//直接上传
function handleBeforeClose(){
  pd.formData = new FormData;
  pd.formData.append("file", props.imgFile);
  fileUpload()
}

//上传图片
async function fileUpload(){
  pd.form.name != null ? pd.formData.append("name", pd.form.name) : pd.formData.append("name", "");
  pd.form.treeValue != null ? pd.formData.append("treeValue", pd.form.treeValue) : pd.formData.append("treeValue", "");

  if (props.idList){
    pd.formData.append("productId", props.idList)
  }
  pd.formData.append("fileName", props.imgFile.name); //原始文件名
  await upLoad(pd.formData).then((value)=>{
    proxy?.$modal.msgSuccess("文件上传成功");
    pd.formData = new FormData()
    console.log(value)
  })
  //关闭剪切窗口
  emit('ok', true)
}

// 关闭切图窗口
function handleCropperClose() {
  pd.form = {
    url: "",
    type: "",
    name: "",
    treeValue: '',
    fileSize: "",
    remark: "",
    uid: "",
  }
  emit('ok', false)
}
</script>

<style lang="scss" scoped>
.avatar-upload-preview {
  border-radius: 0;
}
</style>

